<template>
    <el-row type="flex">
        <el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <!-- <el-button type="success" icon="el-icon-caret-left"></el-button> -->
          <div class="header-back">
              <i class="el-icon-arrow-left"></i>
            <!-- <el-button type="success" icon="el-icon-caret-left"></el-button> -->
          </div>
          
        </el-col>
        <el-col :span="18" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
            <div class="grid-content bg-purple">
                <el-input v-model="input" placeholder="搜索城市/美食/热门景点"></el-input>
            </div>
            </el-col>
        <el-col :span="4" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <div class="header-city">
                 城市<i class="el-icon-caret-bottom el-icon-right"></i>
            </div>
        </el-col>
        <!-- <el-col :span="4" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <el-button class="header-city">
                北京<i class="el-icon-caret-bottom el-icon-right"></i>
                </el-button>
        </el-col> -->
    </el-row>
</template>

<script>
export default {
    data:function(){
        return {
            input:""
        }
    }
};
</script>

<style scoped>
  .el-row {
    justify-content: space-between;
    align-items: center;
    background-color: #61c7cee6
  }
  .el-button{
    background-color: #61c7cee6;
    background-size: cover
  }
  .header-city{
    background-size: cover;
    text-align: center;
    width: 100%;
  }
  .el-col{
      margin: 0 1px;
      /* align-self: center; 项目属性  */
  }
  .header-back{
      text-align: center;
      font-size:25px
  }
</style>


